<template>
  <!-- 发布资讯页面 -->
  <div>
    <div class="shan">
      <!-- 标题 -->
      <label for="" style="display:inline">标题：</label>
      <el-input suffix-icon="el-icon-loading" v-model="input" style="width:600px;" placeholder="请输入内容" />
      <!-- 上传图片 -->
      <div style="float:right;margin-right:200px;margin-top:40px">
        <h4 style="display:inline">封皮:</h4>
        <el-upload
          class="avatar-uploader"
          :action="uploadFileURL"
          :show-file-list="false"
          :on-success="handleSuccess"
          :before-upload="beforeUpload"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon" />
        </el-upload>
      </div>
      <!-- 下拉分类 -->
      <div style="margin:20px 0;" class="xiala">
        <label for="">分类：</label>
        <el-select v-model="value" style="width:200px" placeholder="请选择">
          <el-option
            v-for="item in categoryData"
            :key="item.id"
            :label="item.category.name"
            :value="item.category.id"
          />
        </el-select>
      </div>
    </div>
    <div class="content">
      <div class="textarea">
        </el-input>
          <div style="margin: 220px 0;"></div>
          <el-input
            type="textarea"
            placeholder="请输入内容"
            v-model="textarea"
            maxlength="500"
            minlength='1'
            size='medium'
            show-word-limit >  
          </el-input>      
      </div>
    </div>
    <div class="footer">
       <el-button type="primary" round @click="fanhui">返回</el-button>
      <el-button type="success" round @click="fabu">发布</el-button>
    </div>
  </div>
</template>

<script>
// 引入文件上传路径 和 文件预览的路径
import { showFileURL, uploadFileURL } from '@/utils/config'
import { get, post } from '@/utils/request'
import {mapActions,mapState} from 'vuex'
export default {
  data() {
    return {
      imageUrl:'',
      uploadFileURL,
      // 标题输入
      input:'',
      // 下拉绑定值
      value: '',
      textarea:'',
    }
  },
  computed: {
    ...mapState('fcCategory', ['categoryData'])
  },
  created() {
    // 获取栏目数据
    this.queryDate()
  },
  mounted() {},
  methods: {
     ...mapActions('fcCategory', ['getAllCategoryData']),
    //  发布
   async fabu(){
     let data={
       title:this.input,
       content:this.textarea,
       cover:this.imageUrl,
       categoryId:this.value,
      //  authorId:this.categoryData[0].baseUser.realname,
     }
     let res=await post('/article/saveOrUpdate',data)
     data={}
     this.$router.push({path:'/admin/info/article/List'})
    },
    // 返回
    fanhui(){
      this.$router.go(-1)
    },
    // 获取所有栏目
    queryDate() {
      const data = {
        page: 1,
        pageSize: 100
      }
      this.getAllCategoryData(data)
    },
    /**
     * @description: 上传成功之后 调用方法
     * @param {*} res 上传成功后回调的参数
     * @param {*} file 文件
     * @return {*}
     * @author: ZachGmy
     */
    handleSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
      // 上传成功之后 更新productForm.photo的路径
      // this.imageUrl = showFileURL+this.imageUrl
      // console.log(res.data)
    },
    /**
     * @description: 上传之前 要做的一些限制
     * @param {*} file
     * @return {*}
     * @author: ZachGmy
     */
    beforeUpload(file) {
      const isLt3M = file.size / 1024 / 1024 < 3
      if (!isLt3M) {
        this.$message.error('上传头像图片大小不能超过 3MB!')
      }
    }
  }
}
</script>
<style scoped>
.footer{
  position: fixed;
  right: 30px;
  bottom: 150px;
}

</style>
